<!DOCTYPE HTML>
<html>
<head>
  <title>Tests for MozAfterPaint</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script>
  <style>
    #checkOpacityRepaint {
      will-change: opacity;
    }
    #checkTransformRepaint {
      will-change: transform;
    }
    div {
      width: 100px;
      height: 100px;
      background: radial-gradient(ellipse at center, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    }
  </style>
</head>
<body>
  <div id="checkRepaint">
    Check repaint without will-change
  </div>
  <div id="checkOpacityRepaint">
    Check repaint with will-change
  </div>
  <div id="checkTransformRepaint">
    Check repaint with will-change
  </div>
</body>
<script>

var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
              getInterface(Components.interfaces.nsIDOMWindowUtils);

var initialPaintCount = 0;

function test_checkRepaint(next) {
  var element = document.getElementById("checkRepaint");
  waitForAllPaintsFlushed(function () {
    utils.checkAndClearPaintedState(element);
    element.style.opacity = "0.5";
    waitForAllPaintsFlushed(function () {
      var painted = utils.checkAndClearPaintedState(element);
      // *** We check that this repaints because the test is relying
      //     on this property. If this is broken then this test wont
      //     be reliable check for will-change.
      is(painted, true, "element should have been painted");
      next();
    });
  });
}

function test_checkOpacityRepaint(next) {
  var element = document.getElementById("checkOpacityRepaint");
  waitForAllPaintsFlushed(function () {
    utils.checkAndClearPaintedState(element);
    element.style.opacity = "0.5";
    waitForAllPaintsFlushed(function () {
      var painted = utils.checkAndClearPaintedState(element);
      // BasicLayers' heuristics are so that even with will-change:opacity,
      // we can still have repaints.
      if (utils.layerManagerType != "Basic") {
        is(painted, false, "will-change checkOpacityRepaint element should not have been painted");
      }
      next();
    });
  });
}

function test_checkTransformRepaint(next) {
  var element = document.getElementById("checkTransformRepaint");
  waitForAllPaintsFlushed(function () {
    utils.checkAndClearPaintedState(element);
    element.style.transform = "translateY(-5px)";
    waitForAllPaintsFlushed(function () {
      var painted = utils.checkAndClearPaintedState(element);
      // BasicLayers' heuristics are so that even with will-change:transform,
      // we can still have repaints.
      if (utils.layerManagerType != "Basic") {
        is(painted, false, "will-change checkTransformRepaint element should not have been painted");
      }
      next();
    });
  });
}

SimpleTest.waitForExplicitFinish();
test_checkRepaint(function(){
  test_checkOpacityRepaint(function(){
    test_checkTransformRepaint(function(){
      SimpleTest.finish();
    });
  });
});

</script>
</html>
